<template>
  <div class="body">
    <div class="header"></div>
    <div class="tablebar">
      <div class="logo"></div>
      <div class="title">
        <div class="school">
          <span id="chinese">皖 西 学 院 大学生软件创客实验室</span>
          <span id="english"
            >West Anhui University Campus Software Innovators Lab</span
          >
        </div>
      </div>
      <div class="barList">
        <div class="index" id="bar" @click="index">首页</div>
        <div class="about" id="bar" @click="about">关于创客</div>
        <div class="RDcenter" id="bar" @click="RDcenter">研发中心</div>
        <div class="RDteam" id="bar" @click="RDteam">研发团队</div>
        <div class="Aicenter" id="bar" @click="Aicenter">AI能力中台</div>
        <div class="joinUs" id="bar" @click="joinUs">加入创客</div>
      </div>
    </div>
    <div class="main">
      <div class="mainBody">
        功能开发中......
      </div>
    </div>
  </div>
</template>
<script>
export default {
  components: {
    
  },
  data() {
    return {
      
    };
  },
  computed: {
    // 动态组件的引用
  },
  beforeMount() {
   
  },
  methods: {
    index() {
      this.$router
        .push("/portalIndex")
        .then(() => {
          window.location.reload();
        })
        .catch(() => {});
    },
    about() {
      this.$router.push("/about").catch(()=>{});
    },
    RDcenter() {
      this.$router.push("/RDcenter").catch(()=>{});
    },
    RDteam() {
      this.$router.push("/RDteam").catch(()=>{});
    },
    Aicenter() {
      
    },
    joinUs() {
      this.$router.push("/joinUS").catch(()=>{});
    },
  },
};
</script>

<style lang="scss" scoped>
.mainBody {
  display: flex;
  position: absolute;
  padding: 5% 20%;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  font-size: 3vh;
  font-weight: 600;
}
.main {
  background-color: rgba(255, 255, 255, 0.5);
  width: 90%;
  height: 80%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between; /* 使子元素在主轴上分散排列 */
}
.swiper {
  height: 100%;
  width: 100%;
  .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-weight: bold;
    // font-size: 5%;
    // background-color: #ffffff;
  }
}
.body {
  display: flex;
  flex-direction: column; /* 使子元素垂直排列 */
  // background-color: rgb(255, 255, 255);
  background-image: url(../../assets/images/bac.jpg);
  width: 100%;
  height: 100%;
  background-size: cover; /* 图片正好填充 */
  background-repeat: no-repeat; /* 防止图片重复 */
  background-position: center; /* 图片居中 */
}
.header {
  background-color: #94070a;
  width: 100%;
  height: 3%;
}
.tablebar {
  display: flex;
  height: 10%;
  width: 95%;
  margin: 0 auto;
  align-items: center; /* 垂直居中 */
}
.main {
  width: 95%;
  height: 80%;
  background-color: rgba(255, 255, 255, 0.5);
  margin: 0 auto; /* 使 .main 水平居中 */
  position: relative; /* 添加相对定位以使图标绝对定位相对于 .main */
}
.logo {
  background-image: url(../../assets/images/cksys.png);
  width: 8%;
  height: 96%;
  background-size: cover; /* 图片正好填充 */
  background-repeat: no-repeat; /* 防止图片重复 */
  background-position: center; /* 图片居中 */
}
.title {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 20%;
  height: 85%;
  // font-size: 10%;
  // background-color: #ffffff;
  position: relative;
  font-weight: 600;
}
.school {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column; /* 使文本元素上下排列 */
  align-items: center; /* 垂直居中对齐 */
  font-size: clamp(5px, 6vw, 18px); // 使用 clamp 函数调整字体大小
}
#chinese {
  margin-right: 2%;
  font-family: "STXingkai", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
  font-weight: 600;
  font-size: 2.5vh;
}
#english {
  font-size: 2vh;
}
/* lab元素右下对齐 */
.lab {
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column; /* 使文本元素上下排列 */
  align-items: center; /* 垂直居中对齐 */
  font-size: clamp(5px, 6vw, 17px); // 使用 clamp 函数调整字体大小
}
.barList {
  display: flex;
  justify-content: space-between; /* 子元素均匀分布 */
  width: 60%;
  height: 100%;
  margin-left: auto;
}
#bar {
  height: 100%;
  width: 15%;
  text-align: center; /* 文字水平居中 */
  display: flex;
  align-items: center; /* 文字垂直居中 */
  justify-content: center; /* 文字水平居中 */
  padding-top: 0; /* 移除原来的 padding-top */
  font-weight: 600;
  font-size: 2.5vh;
}
#bar:hover {
  background-color: rgba(255, 255, 255, 0.5); /* 白色透明背景 */
}
.bottom {
  width: 95%;
  height: 3%;
  margin: auto auto;
  font-family: "STXingkai", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
  font-weight: 600;
  color: #e5dddd;
}
.el-icon-full-screen {
  position: absolute;
  z-index: 3;
  top: 3%;
  right: 3%;
}
.el-icon-full-screen:hover {
  color: #ffffff;
}
</style>
